<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="author" content="罗海兵" />
		<meta http-equiv="keywords" content="E货源,买家,分享,评价,前台" />
		<meta http-equiv="description" content="E货源网站前台买家分享评价页面" />
		<title>E货源--会员登陆</title>
		<base href="../../"/>
		<link rel="stylesheet" type="text/css" href="res/css/common.css"/>
		<link rel="stylesheet" type="text/css" href="res/css/appraise.css"/>
		<link rel="stylesheet" type="text/css" href="res/css/toolstip.css"/>
		<script src="res/js/jquery-2.1.4.min.js"></script>
		<style type="text/css">
			#details {
			    /* background-color: #f8f8f8; */
			    width: 100%;
			    height: 298px;
			}
			#details > .specification {
			    margin-bottom: 5px;
			}
			#details .text, .img-color .list li {
			    float: left;
			    margin-right: 10px;
			    color: #666;
			}
			#details div.text {
			    font-size: 16px;
			}
			#details > .specification > .list {
			    overflow: hidden;
			}
			
			#details > .specification > .list li {
			    float: left;
			    background-color: #fff;
			    border: 1px solid #ddd;
			    text-align: center;
			    cursor: pointer;
			    padding: 2px 10px;
			    margin-right: 10px;
				margin-bottom: 5px;
			}
			/* #details > .specification > .list li:NOT(:last-child){
				margin-right: 14px;
			} */
			#details > .specification.tip {
			    margin-bottom: 30px;
			}
			.number > .box > b {
			    border: 1px solid #b0b0b0;
			    color: #b0b0b0;
			    width: 15px;
			    height: 15px;
			    background-color: #fff;
			    display: inline-block;
			    line-height: 14px;
			    text-align: center;
			    cursor: pointer;
			}
			.number > .box > span {
			    border: 1px solid #ddd;
			    width: 34px;
			    height: 20px;
			    line-height: 18px;
			    background-color: #fff;
			    display: inline-block;
			    text-align: center;
			}
			
			#details > .specification > .list li.active {
			    background-image: url(res/images/border.png);
			    background-repeat: no-repeat;
			    border-color: red;
			    background-position-y: 10px;
			    background-position-x: 100%;
			}
			
			.selected {
			    margin-top: 5px;
			}
			.selected > span {
			    color: #bb0200;
			    font-weight: bold;
			    font-size: 18px;
			}
		</style>
		<script type="text/javascript">
		var proPrice=new Object();//定义一个产品规格价格的对象
		var pspId="";//定义一个产品规格价格的ID
		var spNames="";
		var priceRange="";//定义一个直销价格区间
		var price0Range="";//定义一个市场价格区间
		/**
		 * 初始化加载
		 * @returns
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:27:33
		 * @version 1.0
		 */
		function infoInit(){
			//注册小图片点击事件
			$("div.min-img").on("click","li",function(){
				$("div.min-img li").removeClass("active");
				$(this).addClass("active");
				var src=$(this).find("img").attr("src");
				$("div.max-img > img").attr("src",src);
			});
			
			//注册规格点击事件
			$("#details").on("click",".specification > .list > ul > li",function(){
				var li=$(this).parents("ul").find("li.active")[0];
				if($(li).text() == $(this).text()){
					$(this).removeAttr("class");
					$("#proFactoryPrice").text("￥"+priceRange);
					$("#proPrice").text("￥"+price0Range);
					pspId=null;
					$("#spValues").text("未选择产品规格");
				}else{
					$(this).parents("ul").find("li.active").removeAttr("class");
					$(this).addClass("active");
					
					var arr=$(".specification .list ul > li.active");
					var spValues="";
					var str="";
					for(var i=0;i<arr.length;i++){
						spValues+="@"+$(arr[i]).text();
						var sptName=$(arr[i]).parents(".specification").find(".text").text();
						var spName=$(arr[i]).text();
						str+=","+sptName+"："+spName;
					}
					spNames=str.substr(1);
					var key=spValues.substr(1);
					if(proPrice.hasOwnProperty(key)){
						var pro=proPrice[key];
						$("#proFactoryPrice").text("￥"+pro.pspPrice);
						$("#proPrice").text("￥"+(parseFloat(pro.pspFactoryPrice)*1.5).toFixed(2));
						pspId=pro.pspId;
						$("#spValues").text(key.replace(/[@]/g," "));
					}
				}
				
				
				
				
			});
			
			//注册标题点击事件
			$(".cont > .title > div").click(function(){
				$(".cont > .title > div").removeClass("active");
				$(this).addClass("active");
				var className=this.className;
				if(className.indexOf("dotey")>-1){
					$("#proInfo").show();
					$("#comment").hide();
				}else{
					$("#proInfo").hide();
					$("#comment").show();
				}
			});
			var proId=getParam("proId");//获取地址栏参数
			//proId="bd779694-e8fd-4cd6-84f8-e7c628b200e8";
			loadInfo(proId);//加载宝贝详情
			loadInfoImages(proId);//加载图片
			loadInfoSpecification(proId);//加载规格参数
		}
		
		/**
		 * 加载产品的基本信息
		 * @param proId 产品ID
		 * @returns
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:38:30
		 * @version 1.0
		 */
		function loadInfo(proId){
			var url="frontShow/front/findInfoById.action";//设置action请求地址
			var data={"intercept":true,"proId":proId};//设置请求参数
			$.post(url,data,function(map){//发送Ajax请求
				var pro=map;
				var isva=pro.proIsva==0?"<font color='red'>(未上架)</font>":"";
				$("#proName").html(pro.proName+isva);
				alert("直销价："+pro.priceRange+"，市场价："+pro.price0Range);
				priceRange=pro.priceRange;
				price0Range=pro.price0Range;
				$("#proFactoryPrice").text("￥"+priceRange);
				$("#proPrice").text("￥"+price0Range);
			},"json");//设置返回参数类型
		}
		

		/**
		 * 加载产品的规格价格
		 * @param proId 产品ID
		 * @returns
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:29:34
		 * @version 1.0
		 */
		function loadProPrice(proId){
			var url="frontShow/front/findPriceByProId.action";
			var data={"intercept":true,"proId":proId};
			$.post(url,data,function(map){//发送Ajax请求
				proPrice=map;
				$("div.specification li").click();
				$("div.specification li:first-child").click();
			});
		}

		/**
		 * 增加或者减少购买数量
		 * @param obj 被点击的元素节点
		 * @returns
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:30:17
		 * @version 1.0
		 */
		function addOrCut(obj){
			var span=document.querySelector(".number > .box > .num");//得到产品数量所在的文档节点
			var sign=obj.innerText;//获取点击的符号
			var num=parseInt(span.innerText);//将产品数量转化成整数型数字
			if(num==1 && sign=="-") return;//如果数量等于'1'并且点击的符号是'-',则直接返回
			if(sign=="+"){//如果点击的是'+'号
				span.innerText=num+1;//产品数量+1
			}else if(sign=="-"){//如果点击的是'-'号
				span.innerText=num-1;//产品数量-1
			}
		}

		/**
		 * 加载产品规格
		 * @param proId 产品ID
		 * @returns
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:30:46
		 * @version 1.0
		 */
		function loadInfoSpecification(proId){
			var url="frontShow/front/findByProId.action";
			var data={"intercept":true,"proId":proId};
			$.post(url,data,function(arr){//发送Ajax请求
				var str="";
				for(var i=0;i<arr.length;i++){
					var spt=arr[i];
					var spList=spt.spNames.split(",");
					var className="";
					if(spt.spRemark){ 
						str+=","+spt.spRemark;
						className="tip";
					}
					$("div#details div.number:first").before(
						"<div class='specification "+className+"'>"+
							"<div class='text'>"+spt.sptName+"</div>"+
							"<div class='list'>"+
								"<ul>"+
									builder(spList)+
								"</ul>"+
							"</div>"+
						"</div>"
					);
				}
				var spRemark=new Object();
				if(str) spRemark=eval("({"+str.substr(1)+"})");
				var liArr=$("#details > .specification > .list li");
				for(var i=0;i<liArr.length;i++){
					var li=liArr[i];
					var key=$(li).text();
					if(spRemark.hasOwnProperty(key)){
						var div=createTooltip(li,spRemark[key]);
						tipToggle(li,div);
					}
					
				}
				$("div.tooltip").css("display","none");
				loadProPrice(proId);//加载规格价格
			},"json");//设置返回参数类型
		}

		/**
		 * 特殊规格的提示切换
		 * @param obj 被点击的特殊规格
		 * @param div 需要切换隐藏显示的文本容器
		 * @returns
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:31:29
		 * @version 1.0
		 */
		function tipToggle(obj,div){
			var ul=$(obj).parents("ul")[0];
			$(ul).find("li").click(function(){
				if($(this).text()==$(obj).text()){
					if($(this).text() == $(ul).find("li.active").text()){
						div.style.display="none";
					}else{
						div.style.display="block";
						var w=obj.offsetWidth;
						var h= obj.offsetHeight;
						var pos=getPost(obj);
						var w2=div.offsetWidth;
						var h2= div.offsetHeight;
						div.style.left=(pos.x-w2/2+w/2)+"px";
						div.style.top=(pos.y+h+6)+"px";
						//alert("w:"+w+", h:"+", x:"+pos.x+", y:"+pos.y);
					}
					
				}else{
					div.style.display="none";
				}
			});
		}

		/**
		 * 规格的html生成器
		 * @param arr 某一规格类型的规格值数组
		 * @returns 
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:33:24
		 * @version 1.0
		 */
		function builder(arr){
			var html="";
			for(var i=0;i<arr.length;i++){
				html+="<li>"+arr[i]+"</li>";
			}
			return html;
		}

		/**
		 * 获取某个元素的坐标
		 * @param obj 目标元素
		 * @returns 返回一个js对象(包含了x坐标和y坐标)
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:34:11
		 * @version 1.0
		 */
		function getPost(obj){
			var x=0,y=0;
		    do { 
		        x += obj.offsetLeft; 
		        y += obj.offsetTop; 
		    } while (obj = obj.offsetParent); 
			return {"x":x, "y":y};
		}

		/**
		 * 获取某个元素的坐标
		 * @param obj 目标元素
		 * @returns 返回一个js对象(包含了x坐标和y坐标)
		 * @author 罗海兵
		 * @dateTime 2017年11月14日下午6:34:11
		 * @version 1.0
		 */
		function getPost2(obj){
			var X= obj.getBoundingClientRect().left+document.documentElement.scrollLeft;
			var Y =obj.getBoundingClientRect().top+document.documentElement.scrollTop;
			return {"x":X, "y":Y};
		}

		

			/**
			 * 获取URL参数的方法
			 * @param name 属性名
			 * @returns 如果存在返回对应的值,不存在返回null
			 */
			function getParam(name) { 
			  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //设置正则表达式的规则
			  var url= window.location.search;//获取URL地址
			  url=decodeURIComponent(url);//URL解码
			  var r =url.substr(1).match(reg); 
			  if (r != null) {  
			    return unescape(r[2]); 
			  } 
			  return null; 
			}
			/**
			 * 加载产品滚动图片
			 * @param proId 产品ID
			 * @returns
			 * @author 罗海兵
			 * @dateTime 2017年11月11日上午11:13:46
			 * @version 1.0
			 */
			function loadInfoImages(proId){
				var url="frontShow/front/findImgByProId.action";
				var data={"intercept":true,"proId":proId,"imgType":1};
				$.post(url,data,function(arr){//发送Ajax请求
					/* imgArr=arr; */
					/* if(arr.length>0){
						$("#max-img").attr("src",arr[0]);
					} */
					var ul=$("div.min-img > ul")[0];
					//$(ul).find("li").remove();
					for(var i=0;i<arr.length && i<6;i++){
						var imgPath=arr[i];
						$(ul).append("<li><img src="+imgPath+"></li>");
					}
					$(ul).find("li:first-child").click();
					if(arr.length>6){
						$("div.min-img").addClass("show");
					}
				},"json");//设置返回参数类型
			}
			
			/**
			 * 特殊规格的提示工具生成器
			 * @param obj 需要生成提示的目标节点
			 * @param text 提示文本
			 * @returns
			 * @author 罗海兵
			 * @dateTime 2017年11月14日下午6:37:26
			 * @version 1.0
			 */
			function createTooltip(obj,text){
				var div=document.createElement("div"); 
				div.innerHTML=" "+
					"<div class='tooltip-content'>"+text+"</div>"+
					"<div class='tooltip-arrow-outer'></div>"+
					"<div class='tooltip-arrow'></div>";
				document.body.appendChild(div);
				div.className="tooltip tooltip-bottom";
				return div;
			}
			
			$(function(){
				$(".min-img ul li").click(function(){
					$(".min-img ul li").removeAttr("class");
					$(this).addClass("active");
				});
				$.get("pages/front/base.jsp",function(data){
					$("#footer").html($(data).filter("#footer").html());
					infoInit();
				},"html");
			});
		</script>
		<script src="res/js/addressShare.js"></script>
	</head>
	<body>
		<!-- 页眉  start -->
		<div id="header">
			<div class="content">
				<div class="head-top" style="border: 1px solid red; display: none;">
					<h1 style="font-size: 20px;text-align: center;">页眉预留区</h1>
				</div>
				<div class="logo">
					<a href="pages/front/index.jsp">
						<img alt="logo" src="res/images/eLOGO2.jpg" style="max-height: 80px;">
					</a>
					<span class="txt">( 发现好宝贝&nbsp;分享好宝贝 )</span>
					<div class="login-regist font-color-white">
						<a href="pages/front/login.jsp">登陆</a>
						<div class="line-height" style="margin: 0 5px;"></div> 
						<a href="pages/front/login.jsp?">注册</a>
					</div>
				</div>
			</div>
		</div>
		<!-- 页眉     end  -->
		
		<!-- 网页主体   start -->
		<div id="main">
			
			<!-- 主显示区容器  start -->
			<div class="content">
				<!-- 头部：第一个大div  start -->
				<div class="top">
					<!-- 宝贝图片参数    start -->
					<div class="parameter">
						<!-- 标题 -->
						<div class="title">厂家提供的宝贝图片参数</div>
						
						<!-- 图片容器 start -->
						<div class="img-box">
							<!-- 大图 -->
							<div class="max-img">
								<img id="max-img" alt="" src="res/images/max.jpg">
							</div>
						</div>
						<!-- 图片容器 end -->
						
						<!-- 参数规格  start -->
						<div class="param">
							<!-- 名称 -->
							<div class="name">
								<span class="key">名称：</span>
								<span class="value" id="proName"></span>
							</div>
							
							<!-- 价格 -->
							<div class="price">
								<span class="key">价格：</span>
								<span class="value">
									厂家直销价<em id="proFactoryPrice"></em>
									/市场价<em id="proPrice" style="text-decoration: line-through;"></em>
								</span>
							</div>
							<div id="details">
								<!-- 数量：1~max存货量，以"+"和"-"进行增减 -->
								<div class="number">
									<div class="text">数量</div>
									<div class="box">
										<b class="add" onclick="addOrCut(this)">-</b>
										<span class="num" id="cartNum">1</span>
										<b class="cut" onclick="addOrCut(this)">+</b>
									</div>
								</div>
								<div class="selected">
									<span>已选择：</span>
									<span id="spValues">厚绒内里 白色 33</span>
								</div>
								
								<!-- 小图片 -->
								<div class="min-img">
									<ul>
										<li class="active"><img src="res/images/min.jpg" /></li>
										<li><img src="res/images/min.jpg" /></li>
										<li><img src="res/images/min.jpg" /></li>
										<li><img src="res/images/min.jpg" /></li>
										<li><img src="res/images/min.jpg" /></li>
									</ul>
									<i class="img-icon lf">&#xe603;</i>
									<i class="img-icon rt">&#xe602;</i>
								</div>
							</div>
							<!-- 材质
							<div class="texture">
								<span class="key">材质：</span>
								<span class="value"></span>
							</div>
							 -->
							<!-- 尺寸 
							<div class="size">
								<span class="key">尺寸：</span>
								<span class="value"></span>
							</div>-->
							
							<!-- 颜色 
							<div class="color">
								<span class="key">颜色：</span>
								<span class="value"></span>
							</div>-->
							
							
							<!-- 支付方式 
							<div class="pay">
								支付方式：微信、支付宝、银行卡
							</div>
							-->
							
						</div>
						<!-- 参数规格    end  -->
						
					</div>
					<!-- 宝贝图片参数    end -->
					
					<!-- 商品展示   start -->
					<div class="goods">
						<div class="title">买家(疯清扬)还购买了</div>
						<div class="list">
							<ul>
								<li>
									<div class="img"><img alt="" src="res/images/min.jpg" /></div>
									<div class="txt">长筒过膝女靴白色加绒<br>高筒靴弹力大小码</div>
								</li>
								<li>
									<div class="img"><img alt="" src="res/images/min.jpg" /></div>
									<div class="txt">长筒过膝女靴白色加绒<br>高筒靴弹力大小码</div>
								</li>
							</ul>
						</div>
					</div>
					<!-- 商品展示        end -->
				</div>
				<!-- 头部：第一个大div   end  -->
				
				<!-- 头部：第二个大div  start -->
				<div class="cont">
					<!-- 实物描述  start -->
					<div class="describe">
						<!-- 标题 -->
						<div class="title">买家对实物的拍照与描述</div>
						
						<!-- 买家对实物的拍照与描述 -->
						<div class="box">
							<!-- 买家描述 -->
							<div class="remark">
								<!-- 买家资料 -->
								<div class="datum">
									<div id="portrait"><img src="res/images/head.jpg" style="max-height: 100%;"></div>
									
									<div id="info">
										<div style="height: 35px;line-height: 35px;margin-bottom: 10px;">
											<span class="txt">买家名称:</span>
											<span class="buyer">疯清扬</span>
											<img src="res/images/buyer.png" alt="咨询买家" style="position: relative;top: 8px;"/>
										</div>
										
										<div>
											<span class="txt">买家等级:</span>
											<span class="grade">★</span>
										</div>
									</div>
								</div>
								
								<div class="list">
									<ul style="margin-left: 20px;">
										<li>
											<span class="txt">买家对产品的评语：</span>
											<span class="comment"></span>
										</li>
										<li>
											<span class="txt">买家对产品的印象：</span>
											<span class="impress"></span>
										</li>
									</ul>
								</div>
								
							</div>
							
							<!-- 砍价 -->
							<div class="bargain">
								<div class="name">(<em>疯清扬</em>)为您努力向卖家去砍价</div>
								<div class="price">最终为您砍价到<em>￥85.2</em></div>
								<div class="save">为您节省<em>￥6.5</em></div>
								<div class="btn-links"  align="center">
									<div class="like btn">喜欢买家<br/>分享的这宝贝</div>
									<div class="buy btn">
										<span style="font-size: 18px;">我要去购买</span>
										<img src="res/images/cart.png" style="position: relative;top: 2px;"/>
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- 实物描述      end  -->
					
					<!-- 上传照片  start -->
					<div class="photo" align="center">
					</div>
					<!-- 上传照片      end  -->
					
					<!-- <div class="" style="height: 500px;"></div>
					
					<div class="" style="height: 500px;border-bottom: none;"></div> -->
				</div>
				<!-- 头部：第二个大div   end  -->
				
			</div>
			<!-- 主显示区容器    end -->
			
		</div>
		<!-- 网页主体     end -->
		
		<!-- 页脚   start -->
		<div id="footer">
		</div>
		<!-- 页脚   end   -->
	</body>
</html>